<template>
    <div class="gray-body " style="max-width:750px" :class="searchArr.length ? '' : 'white-bg'">
        <header>
            <div class="header-box">
                <div class="header-search" style="margin: 7px 10px">
                    <input type="text" class="ser-input" v-model="searchText" @keyup.enter="enterSearch" />
                    <i class="ser-i"></i>
                </div>
            </div>
        </header>
        <div class="position-relative overflow-h" style="height: 120px">
            <img src="@/assets/images/test.jpg" style="height: 300%; transform: translate(-50%, -41%)" class="center-xy" />
            <div class="w-100 h-100 position-absolute top-0" style="background: rgba(0, 0, 0, 0.5)" />
            <div class="center-xy">
                <div class="rounded-circle zindex-99 overflow-h ml-1" style="height: 60px; width: 60px">
                    <img src="@/assets/images/test.jpg" class="w-100" />
                </div>
                <div class="font-14 text-white mt">
                    <span>中核凯丽商城</span>
                </div>
            </div>
        </div>
        <div :class="themes.theme"> 
            <div class="search-list" style="padding-top:0" :class="themes.theme">
                <div class="m-tabs" style="position:sticky">
                    <div class="item" :class="{ on: active == 'recDate' }" @click="defaultList"><span class="txt">默认</span></div>
                    <div
                        class="item arrow"
                        :class="{ 'arrow-up': active == 'buys' && salesSort == 'asc', 'arrow-down': active == 'buys' && salesSort == 'desc' }"
                        @click="salesList"
                    >
                        <span class="txt">销量</span>
                    </div>
                    <!-- <div  class="item arrow"><span class="txt">评论数</span></div> -->
                    <div
                        class="item arrow"
                        :class="{ 'arrow-up': active == 'price' && priceSort == 'asc', 'arrow-down': active == 'price' && priceSort == 'desc' }"
                        @click="priceList"
                    >
                        <span class="txt">价格</span>
                    </div>
                    <div class="item" @click="changeType">
                        <img
                            :src="goodsType ? require('@/assets/images/search-col.png') : require('@/assets/images/search-row.png')"
                            alt=""
                            class="mes-img"
                        />
                    </div>
                </div>
                <div class="coupon-tip" v-if="source == 'coupon'">
                    限时促销：以下商品可使用
                    <span class="price">{{ couponDesc }}</span>
                    的优惠券
                </div>
                <van-list
                    v-model="loading"
                    :finished="finished"
                    finished-text="没有更多了"
                    @load="onLoad"
                    :immediate-check="false"
                    :error.sync="error"
                    error-text="请求失败，点击重新加载"
                >
                    <!-- 纵向列表 -->
                    <div class="ser-list" id="list01" v-if="goodsType">
                        <SearchCon
                            @myEvent="enterGoods"
                            :parmas="item"
                            :pic="item.pic"
                            :name="item.name"
                            :money="item.price"
                            v-for="(item, index) in searchArr"
                            :key="index"
                        >
                            <div class="pro-com" slot="proCom" v-if="item.sales >= 0">
                                <!-- <i class="type-tag" v-if="item.shopType == 0">专营店</i>
                                <i class="type-tag" v-if="item.shopType == 1">旗舰店</i>
                                <i class="type-tag" v-if="item.shopType == 2">自营店</i> -->
                                <small class="com-item">{{ item.sales >= 9999 ? Math.floor(item.sales / 1000) / 10 + 'w' : item.sales }}件已售</small>
                            </div>

                            <div class="dis"></div>
                        </SearchCon>
                    </div>
                    <!-- 纵向列表 -->

                    <!-- 横向列表 -->
                    <div class="pro-list" id="list02" v-if="!goodsType">
                        <ProList
                            @myEvent="enterGoods"
                            :parmas="item"
                            :pic="item.pic"
                            :name="item.name"
                            :money="item.price"
                            v-for="(item, index) in searchArr"
                            :key="index"
                        >
                            <div class="pro-com" slot="proCom" v-if="item.sales >= 0">
                                <!-- <i class="type-tag" v-if="item.shopType == 0">专营店</i>
                                <i class="type-tag" v-if="item.shopType == 1">旗舰店</i>
                                <i class="type-tag" v-if="item.shopType == 2">自营店</i> -->
                                <small class="com-item">{{ item.sales >= 9999 ? Math.floor(item.sales / 1000) / 10 + 'w' : item.sales }}件已售</small>
                            </div>
                        </ProList>
                    </div>
                    <!-- 横向列表 -->
                </van-list>
            </div>
            <ready v-if="readyType"></ready>
            <Noempty v-if="noneResult" :pic="require('@/assets/images/order-empty.png')" :title="'暂无列表信息'" />
        </div>
    </div>
</template>

<script>
import { List } from 'vant'
import Noempty from 'components/Noempty/Noempty'
import { mapState } from 'vuex'
import ProList from 'components/proList/proList'
import SearchCon from 'components/proList/searchCon'
import ready from 'components/loading/loading'
import { store } from 'utils/Cache'
import { prodlist } from 'api/search'

// addToHistory

export default {
    data() {
        return {
            goodsType: false, //默認-纵向列表
            searchArr: [], //搜索列表数据
            total: '',
            searchText: '',
            readyType: false,
            loading: false,
            finished: false,
            page: 1,
            active: 'recDate',
            salesSort: 'asc',
            priceSort: 'asc',
            params: {
                couponId: '',
                curPageNO: 1,
                keyword: '',
                couponId: '',
                brandId: '', //品牌id
                firstCategoryId: '', //一级分类ID
                threeCategoryId: '', // 三级分类Id
                secondCategoryId: '', //二级分类Id,
                orderType: 'desc',
                orderWay: 'recDate'
            },
            couponDesc: '', //促销的信息
            source: '', //来源
            noneResult: false,
            error: false
        }
    },
    mounted() {
        let that = this

        let searchParams = this.params
        if (this.$route.query.source) {
            switch (this.$route.query.source) {
                case 'category':
                    if (this.$route.query.grade == 1) {
                        searchParams.firstCategoryId = this.$route.query.categoryId
                    } else if (this.$route.query.grade == 2) {
                        searchParams.secondCategoryId = this.$route.query.categoryId
                    } else if (this.$route.query.grade == 3) {
                        searchParams.threeCategoryId = this.$route.query.categoryId
                    }
                    break
                case 'cates':
                    if (this.$route.query.grade == 1) {
                        searchParams.firstCategoryId = this.$route.query.brandId
                    } else if (this.$route.query.grade == 2) {
                        searchParams.secondCategoryId = this.$route.query.brandId
                    } else if (this.$route.query.grade == 3) {
                        searchParams.threeCategoryId = this.$route.query.brandId
                    }
                    break
                case 'text':
                    if (this.$route.query.searchText) {
                        //搜索词进来
                        searchParams.keyword = this.$route.query.searchText
                        this.searchText = this.$route.query.searchText
                    }
                    break
                case 'brands':
                    if (this.$route.query.brands) {
                        searchParams.brandId = this.$route.query.brandId
                    }
                    break
                case 'coupon':
                    if (this.$route.query.couponId) {
                        searchParams.couponId = this.$route.query.couponId
                        this.couponDesc = this.$route.query.couponDesc
                        this.source = this.$route.query.source
                    }
                    break
            }
        }
        this.getsearchList(searchParams)
    },
    methods: {
        goback() {
            this.$router.back()
            this.$router.isBack = true
        },
        enterGoods(event) {
            let goodsInfoId = event.prodId
            this.$router.push({
                path: `/goodsDetail`,
                query: {
                    goodsInfoId: goodsInfoId
                }
            })
        },
        //商品列表切换模式
        changeType() {
            this.goodsType = !this.goodsType
        },
        enterSearch() {
            let searchText = this.trim(this.searchText)
            this.params.keyword = searchText
            this.params.categoryId = ''
            this.params.brandId = ''
            store.addToHistory(store.History, searchText)
            this._showLoadingCenter()
            this.initialize()
            this.getsearchList(this.params)
        },
        //获取列表数据
        getsearchList(params) {
            prodlist(params)
                .then((res) => {
                    this.readyType = true
                    if (res.status == 1) {
                        this.searchArr = res.result.resultList
                        this.setTotal(res.result.total)
                    } else {
                        this.setTotal(0)
                    }
                })
                .catch((e) => {
                    this.setTotal(0)
                    this.error = true
                })
                .finally((e) => {
                    this._hideLoadingCenter()
                })
        },
        //加载更多
        onLoad() {
            setTimeout(() => {
                if (this.searchArr.length >= this.total) {
                    this.loading = false
                    this.finished = true
                } else {
                    this.page = this.page + 1
                    this.params.curPageNO = this.page
                    prodlist(this.params).then((res) => {
                        for (let i = 0; i < res.result.resultList.length; i++) {
                            this.searchArr.push(res.result.resultList[i])
                        }
                        // 加载状态结束
                        this.loading = false
                    })
                }
            }, 500)
        },
        //默认
        defaultList() {
            this.initialize()
            this.active = 'recDate'
            this.params.orderWay = this.active
            this.params.orderType = 'desc'
            this.getsearchList(this.params)
        },
        //销量
        salesList() {
            this.initialize()
            this.active = 'buys'
            this.params.orderWay = this.active
            this.params.orderType = this.salesSort = this.salesSort == 'asc' ? 'desc' : 'asc'
            this.getsearchList(this.params)
        },
        priceList() {
            this.initialize()
            this.active = 'price'
            this.params.orderWay = this.active
            this.params.orderType = this.priceSort = this.priceSort == 'asc' ? 'desc' : 'asc'
            this.getsearchList(this.params)
        },
        //初始化
        initialize() {
            this.page = 1
            this.params.curPageNO = 1
            this.searchArr = [] //清除数组数据
            this.noneResult = false
            this.finished = false //重置判断更多
            this.total = null
        },
        //设置setTotal
        setTotal(total) {
            this.total = total
            if (total == 0) {
                this.noneResult = true
            }
        },
        _showLoadingCenter() {
            this.readyType = true
        },

        _hideLoadingCenter() {
            this.readyType = false
        },
        //清除空格
        trim(input) {
            return input.replace(/^\s+|\s+$/, '')
        }
    },
    computed: {
        ...mapState(['themes'])
    },
    components: {
        ProList,
        SearchCon,
        ready,
        Noempty
    }
}
</script>

<style src="@/assets/css/search.css" scoped></style>
<style src="@/assets/css/style/list-style.css" scoped></style>
<style scoped>
.mar {
    margin: 7px 10px 7px 0 !important;
}
.coupon-tip {
    padding: 8px 10px;
    font-size: 12px;
    line-height: 16px;
}
.mes-img {
    width: 20px;
    height: 20px;
    vertical-align: middle;
    margin-top: -4px;
}
</style>
